<template>
  <div style="height: 100%" class="ForgetPwd">
    <el-row align="middle" style="height: 100%">

      <!--      左边 -->
      <el-col :md="12" :lg="12" class="hidden-sm-and-down" style="height: 100%">
        <div class="div-left" style="height: 100%">

          <div class="left_img"></div>
        </div>
      </el-col>
      <!--右边输入框-->
      <el-col :sm="24" :md="12" :lg="12" style="height: 98%;">
        <div class="login">
          <el-form ref="loginForm" :model="loginForm" class="login-form">
            <h3 class="title">找回密码</h3>
            <el-form-item style="margin-top: 25%">
              <el-col :span="18">
                <el-input
                  v-model="loginForm.password"
                  type="text"
                  auto-complete="off"
                  placeholder="请输入手机号"
                  @keyup.enter.native="handleLogin"
                >
                </el-input>
              </el-col>
              <el-col :span="6" style="color: #43425D;text-align: right;cursor:hand" class="font14">
                <el-button
                  size="medium"
                  type="primary"
                  style="background: #FFF;color: #1e1e1e;border: hidden;padding: 0"
                  @click.native.prevent="sendCode"
                >
                  <span style="border-bottom: #1e1e1e solid 1px;text-align: right" class="font14">点击发送验证码</span>

                </el-button>


              </el-col>
            </el-form-item>

            <el-form-item prop="username" class=" el-form-item  ">
              <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入验证码">
              </el-input>
            </el-form-item>
            <el-form-item prop="username" class=" el-form-item  ">
              <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请设置新的登录密码">
              </el-input>
            </el-form-item>
            <el-form-item prop="username" class=" el-form-item  ">
              <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请再次输入新密码">
              </el-input>
            </el-form-item>


            <el-form-item style="width:100%; border: hidden">

              <div class="div-center">
                <el-col :span="12" class="align-center">
                  <el-button
                    size="medium"
                    type="primary"
                    class="sumbit_btn "
                    style=" height: 50px;"
                    @click.native.prevent="handleLogin"
                  >
                    <span>提交</span>

                  </el-button>
                </el-col>
              </div>
            </el-form-item>

          </el-form>
          <!--  底部  -->

        </div>
        <div class="el-login-footer" style="color: #1e1e1e">
          <div class="div-center">
            <el-col :span="3">
              <el-button
                size="medium"
                type="primary"
                style="background: #FFF;border: hidden;"
                class="btm_bor textcolr"
                @click="ToRegister"
              >
                <span class="btm_bor textcolr ">注册</span>

              </el-button>
            </el-col>
            <el-col :span="3">
              <el-button
                size="medium"
                type="primary"
                style="background: #FFF;border: hidden;"
                @click="ToLogin"
              >
                <span class="btm_bor textcolr ">登录</span>

              </el-button>
            </el-col>


          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import Cookies from "js-cookie";

  export default {
    name: "ForgetPwd",
    data() {
      return {
        codeUrl: "",

        cookiePassword: "",
        //表单属性，根据需要自定义
        loginForm: {
          username: "",
          password: "",
          rememberMe: false,
          code: "",
          uuid: ""
        },

        loading: false,

      };
    },
    watch: {
      $route: {}
    },
    created() {

    },
    methods: {
      //跳转界面
      ToLogin() {
        this.$router.push({path: this.redirect || "/login"}).catch(() => {
        });
      },
      sendCode() {
        //  发送验证码
      },
      ToRegister() {
        this.$router.push({path: this.redirect || "/register"}).catch(() => {
        });
      },

      handleLogin() {

        this.$router.push({path: this.redirect || "/"}).catch(() => {
        });
      }
    }
  };
</script>

<style>

  .login-form .el-input--medium .el-input__inner {
    border: hidden;
  }

</style>

<style rel="stylesheet/scss" lang="scss" scoped>


  .sumbit_btn {
    width: 100%;
    background: #282D30;
    color: #fff;
    border: #43425D solid 1px;

    margin-top: 30px;
  }

  .btm_bor {
    border-bottom: #43425D solid 1px;
    color: #43425D;

  }

  html {
    height: 100%;
  }

  body {
    height: 100%;
  }

  .textcolr {
    color: #43425D;
  }


  .div-left {
    background: linear-gradient(180deg, #242348 0%, #5A55AA 100%);
    display: flex;
    min-height: 500px;
    align-items: flex-end;
  }

  .align-center {
    text-align: center

  }

  .left_img {
    width: 100%;
    height: 60%;
    background-image: url("../../../assets/images/loginbg.jpg");
    background-size: cover;
  }

  .div-center {
    display: flex;
    justify-content: center;
    text-align: center;

    align-items: center;
  }

  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 95%;
    min-height: 500px;


  }

  .title {

    text-align: center;
    font-size: 35px;
    color: #282D30;
  }


  .el-form-item {
    border-bottom: #E9E9F0 solid 2px;
    margin-top: 6%;
  }

  .login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 60%;
    min-width: 350px;
    padding: 25px 25px 5px 25px;

    .el-input {
      height: 38px;

      input {
        border: hidden;
        border-radius: 0px;
        font-size: 15px;
        height: 38px;
      }

    }

    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }

  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }


  .el-login-footer {

    width: 100%;
    text-align: center;
    font-size: 14px;

  }


</style>
